<template>
  <div class="main-box">
    <div class="header-box">
      <header-view />
    </div>
    <div class="container-box">

      <div class="content-box">
        <!-- 左 -->
        <div class="leftBox">
          <ScrollView class="sub-item-div" />
          <RainbowView class="sub-item-div" />
          <SeamlessView class="sub-item-div" />
        </div>
        <!-- 中 -->
        <div class="centerBox">
          <CountUpView class="sub-item-div-middle" />
          <MapChartView style="margin-top: 10px;padding: 3px; height: 70%;" />
        </div>
        <!-- 右 -->
        <div class="rightBox">
          <CapsuleView class="sub-item-div" />
          <ActiveView class="sub-item-div" />
          <WordCloudView class="sub-item-div" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import ScrollView from "../components/ScrollView.vue";
import MapChartView from "../components/MapChartView.vue";
import RainbowView from "../components/RainbowView.vue";
import SeamlessView from "../components/SeamlessView.vue";
import ActiveView from "../components/ActiveView.vue";
import CountUpView from "../components/CountUpViewView.vue";
import CapsuleView from "../components/CapsuleView.vue";
import WordCloudView from "../components/WordCloudView.vue";
import HeaderView from "@/components/HeaderView.vue";
</script>

<style lang="scss" scoped>
.main-box{
  background: url('@/assets/imgs/bg.jpg');
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  .header-box {
    //width: 100vh;
    height: 8vh;
  }
  .container-box {
    height: 92vh;
  }
}

.content-box {
    height: 100%;
    color: white;
    display: flex;
}

.leftBox {
    flex: 1;
    margin: 5px;
    padding: 3px;
    display: flex;
    flex-direction: column;
}

.centerBox {
    width: 50%;
    margin: 5px;
    padding: 3px;
    display: flex;
    flex-direction: column;
}

.rightBox {
    flex: 1;
    margin: 5px;
    padding: 3px;
    display: flex;
    flex-direction: column;
}

.sub-item-div {
    height: 33%;
    box-sizing: border-box;
    padding-bottom: 4px;
}

.sub-item-div-middle {
    padding: 3px;
    height: 30%;
}
</style>